<template>
  <div class="change-pwd">
    <img :src="dalImg(user.avatar)" alt="图片丢了" />
    <label for=""
      >原始密码：<input
        type="password"
        placeholder="请输入原始密码"
        v-model="oldPassword"
    /></label>
    <label for="">
      &nbsp; &nbsp;新密码：<input
        type="password"
        placeholder="请输入新密码"
        v-model="password"
    /></label>
    <Button round type="primary" style="width: 80vw" @click="save">保存</Button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Button, Toast } from "vant";
import { dalImg } from "../utils/tools";
import { userInfoAPI, changeUserPwdAPI } from "../server/auth";

const { push } = useRouter();
const oldPassword = ref("");
const password = ref("");
const user = ref("");
// 获取用户信息
userInfoAPI().then((res) => {
  // console.log(res.data, "用户信息");
  user.value = res.data;
});
// 保存按钮
const save = () => {
  changeUserPwdAPI({
    password: password.value,
    oldPassword: oldPassword.value,
  }).then((res) => {
    // console.log(res);
    if (res.code === 1) {
      Toast.success("修改成功");
      setTimeout(() => {
        push({
          name: "user",
        });
      }, 1000);
    } else {
      Toast.fail(res.msg);
    }
  });
};
</script>
